<style>
    .custom-toolbar{padding: 0em 1em 1em 0em;}
    .modal-lg {
        width: 918px;
    }
    .form-inline i{margin-right: 19px !important;}
</style>
<div class="row-fluid clearfix">
    <div class="col-md-12 column">
        <ul class="breadcrumb">
            <li>
                <a href="index.html">首页</a>
            </li>
            <li class="active">
                客户信息管理
            </li>
        </ul>
    </div>
    <div class="col-md-12 column">
        <div class="col-sm-12 div-page">
            <div class="col-sm-12 div-table">
                <div id="custom-toolbar" class="col-sm-12 custom-toolbar">

                </div>
                <table id="table" class="table table-hover table-condensed"
                       data-click-to-select="true"  data-single-select="true" data-height="430">
                    <thead>
                    <tr>
                        <th data-field="state" data-checkbox="true" ></th>
                        <th data-field="PhoneNo" data-halign="center" data-align="center">绑定电话</th>
                        <th data-field="CardNo" data-halign="center" data-align="center">绑定卡号</th>
                        <th data-field="ABISCode" data-halign="center" data-align="center">ABISCode</th>
                        <th data-field="UsrState" data-halign="center" data-align="center" data-formatter="UsrStateFormatter">用户状态</th>
                        <th data-field="ChargeState" data-halign="center" data-align="center" data-formatter="ChargeStateFormatter">扣费状态</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
        <div class="col-sm-12 alert alert-success div-alert" id="events-result" data-es="Aquí se muestra el resultado del evento"></div>
        <!-- #筛选条件遮罩层 --->
        <div class="modal fade" id="modal-Filter" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <div class="modal-title" id="myModalLabel1">
                            查询条件
                        </div>
                    </div>
                    <form id="queryForm" method="post" class="form-horizontal layer_msg">
                        <div class="modal-body">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">所属机构</label>
                                <div class="col-sm-8">
                                    <input type="hidden" class="form-control" name="OrgId" id="OrgId" value=""/>
                                    <input type="hidden" class="form-control" id="OrgName" value=""/>
                                    <div class="col-sm-4" style="padding-left: 0;padding-right: 2px">
                                        <select class="form-control" id="level1">
                                        </select>
                                    </div>
                                    <div class="col-sm-4" style="padding-left: 0;padding-right: 2px;display: none">
                                        <select class="form-control" id="level2">
                                        </select>
                                    </div>
                                    <div class="col-sm-4" style="padding-left: 0;padding-right: 0;display: none">
                                        <select class="form-control" id="level3">
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">用户状态</label>
                                <div class="col-sm-8">
                                    <select class="form-control" name="UsrState" >
                                        <option value="">全部</option>
                                        <option value="1">正常</option>
                                        <option value="0">停用</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">扣费状态</label>
                                <div class="col-sm-8">
                                    <select class="form-control" name="ChargeState" >
                                        <option value="">全部</option>
                                        <option value="1">正常</option>
                                        <option value="0">欠费</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">绑定电话</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="PhoneNo" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">绑定卡号</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="CardNo" />
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button id="modal-btn-query" type="submit" class="btn btn-primary" data-dismiss="modal">查询</button> <button id="modal-btn-close1" type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
$(function () {

    /*获取当前角色的按钮权限-Start*/
    var btnHtml ;
    var btnRole = JSON.parse($.cookie("Role_note"));
    btnHtml = '<div class="form-inline" role="form">';
    btnHtml += (btnRole["DataModify"]) ? '<button id="btn-DataModify" type="button" role="button" class="subFun btn btn-sm btn-Data btn-success disabled">' +
    '<span class="glyphicon glyphicon-pencil"></span> 修改</button> ' : '' ;
    btnHtml += '<button id="btn-DataDetail" type="button" role="button" class="subFun btn btn-sm btn-Data btn-info disabled">' +
            '<span class="glyphicon glyphicon-th-list"></span> 详情</button> ';
    btnHtml += '<button id="btn-DataOut" type="button" role="button" class="btn btn-sm btn-primary">' +
            '<span class="glyphicon glyphicon-save"></span> 导出</button>';
    btnHtml += '<button id="btn-Filter" type="button" href="#modal-Filter" role="button" data-toggle="modal" class="btn btn-sm btn-primary pull-right" title="请选择数据">' +
            '<span class="glyphicon glyphicon-th-list"></span> 查询</button></div>';
    $("#custom-toolbar").append(btnHtml);
    /*获取当前角色的按钮权限-End*/

    /*BootstrapTable初始化-Start*/
    $('#table').bootstrapTable({
        queryParams:function(params) {
            var qp={
                page:params.offset/params.limit+1,
                rows:params.limit
            };
            return qp;
        },
        data:[],
        sidePagination: 'server',
        pagination:true,
        pageSize:10,
        search:false,
        responseHandler:function(data){
            return data.data;
        }
    })
        .on('click-row.bs.table', function (e, row, $element) {
            if ( $element.hasClass('selected') ) {
                $element.removeClass('info');
            }
            else {
                $element.parent('tbody').find(' > tr.selected ').removeClass("info");
                $element.addClass('info');
            }
        })
        .on('check.bs.table', function (e, row, $element) {
            $(".btn-Data").removeClass("disabled");
        })
        .on('uncheck.bs.table', function (e, row, $element) {
            $(".btn-Data").addClass("disabled");
        });
    /*BootstrapTable初始化-End*/

    /*筛选框数据初始化-Start*/
    $('#modal-Filter').modal('show');
    /*筛选框数据初始化-End*/

    /*筛选框查询按钮点击事件注册-Start*/
    $("#modal-btn-query").click(function(e){
        $('#table').bootstrapTable('refresh',{url:globalUrl+"api/WhiteList?"+$("#queryForm").serialize()});
    });
    /*筛选框查询按钮点击事件注册-End*/

    OrgSelect("全部",$("#OrgId"),$("#level1"),$("#level2"),$("#level3"));
    /*子功能按钮事件注册-Start*/
    $("#btn-DataOut").click(function(){
        if(confirm("确定要导出数据吗？"))
        {
            location.href = globalUrl + "api/WhiteList?"+$("#queryForm").serialize();
        }
    });
    $('.subFun').on("click",function () {
        var rowData=$('#table').bootstrapTable('getSelections')[0];
        var fileName=$(this).attr("id").substr(8);
        var url="../assets/tpls/800WhiteList_"+fileName+".html";

        getTpls(url,function(resp){

            $("#modal-Template").html(resp);
            $.ajax({
                    type: "get",
                    async:false,
                    datatype:"json",
                    url: globalUrl+"api/WhiteList?OrgId="+"&PhoneNo="+rowData.PhoneNo,
                    success: function (resp) {
                        if(resp.result)
                        {
                            dataAjaxBindToModal($('#validForm'),resp.data);
                        }
                        else
                        {
                            alert(resp.msg);
                        }
                    },
                    error:function(){
                        alert("后台未成功返回！");
                    }
                });

            switch (fileName){
                case "Modify":
                    $("#FreeState,#UsrState").attr("disabled",true);
                    $('#modal-Template').modal('show');
                    $('#validForm')
                            .formValidation({
                                err: {
                                    container: 'popover'
                                },
                                icon: {
                                    valid: 'glyphicon glyphicon-ok',
                                    invalid: 'glyphicon glyphicon-remove',
                                    validating: 'glyphicon glyphicon-refresh'
                                }
                            })
                            .on('success.form.fv', function(e) {
                                e.preventDefault();
                                $.ajax({
                                    type: "put",
                                    data:{
                                        UsrNO:rowData.UsrNo,
                                        PhoneNo:$("#BindPhone").val(),
                                        CardNo:$("#CardNo").val(),
                                        ChargeState:$("#ChargeState").val()
                                    },
                                    url: globalUrl+"api/WhiteList",
                                    success: function (resp){
                                        if(resp.result)
                                        {
                                            alert("操作成功！");
                                            $('#modal-Template').modal('hide');
                                            $('#table').bootstrapTable('refresh',{url:globalUrl+"api/WhiteList?"+$("#queryForm").serialize()});
                                        }
                                        else
                                        {
                                            alert(resp.msg);
                                        }
                                    },
                                    error:function(){
                                        alert("后台未成功返回！");
                                    }
                                });
                            });
                    break;
                case "Detail":
                    $("#ChargeState,#FreeState,#UsrState").attr("disabled",true);
                    $('#modal-Template').modal('show');
                    break;
                default:
            }


        });

        });
    /*子功能按钮事件注册-End*/
    });

function UsrStateFormatter(value, row) {
    var v="未知";
    if(value==0)
    {
        v="停用";
    }
    if(value==1)
    {
        v="正常";
    }
    return v;
}
function ChargeStateFormatter(value, row) {
    var v="未知";
    if(value==0)
    {
        v="欠费";
    }
    if(value==1)
    {
        v="正常";
    }
    return v;
}
function getNums(lines){
    var str="";
    for( var i=0;i<lines.length;i++)
    {
        str+=lines[i].PhoneNo+","
    }
    console.log(str.substr(0,str.length-1));
    return str.substr(0,str.length-1);
}
function OrgSelect(text,$obj,$sel1,$sel2,$sel3){
    switch ($.cookie("OperClass")){
        case "1":
            FormatSelectHasABIS(globalUrl+"api/Site?orgid=910",$sel1,text,"",function(resp){});
            break;
        case "2":
            $sel1.parent().addClass("hidden");
            $sel2.empty().parent().css("display","block");
            FormatSelectHasABIS(globalUrl+"api/Site?orgid="+ $.cookie("OrgId"),$sel2,text,"",function(resp){});
            break;
        case "3":
            $sel1.parent().addClass("hidden");
            $sel3.empty().parent().css("display","block");
            FormatSelectHasABIS(globalUrl+"api/Site?orgid="+ $.cookie("OrgId"),$sel3,text,"",function(resp){});
            break;
        case "4":
            $sel1.parent().addClass("hidden");
            $sel2.parent().addClass("hidden");
            $sel3.parent().addClass("hidden");
            $("#OrgId").val($.cookie("OrgId")).attr("readonly",true).parent().parent().css("display","none");
            $(".custom-selected").addClass("hidden");
            break;
    }
    $sel1.change(function(){
        $sel2.empty().parent().css("display","none");
        $sel3.empty().parent().css("display","none");
        $obj.val($(this).val());
        $obj.next().val($(this).find("option:selected").text());
        if($(this).val()!=""){
            FormatSelectHasABIS(globalUrl+"api/Site?orgid="+$(this).val(),$sel2,text,"",function(resp){
                if($sel2.find("option").length>0)
                {
                    $sel2.parent().css("display","block");
                }
            });
        }
        else
        {
            $obj.val("910");
        }


    });
    $sel2.change(function(){
        $obj.val($(this).val());
        $obj.next().val($(this).find("option:selected").text());
        $sel3.empty().parent().css("display","none");
        if($(this).val()!=""){
            var orgid=$(this).val();
            var orgtext=$(this).find("option:checked").text();
            FormatSelectHasABIS(globalUrl+"api/Site?orgid="+$(this).val(),$sel3,text,"",function(resp){
                level31=resp;
                if($sel3.find("option").length>0)
                {
                    $sel3.parent().css("display","block");
                }
            });
        }


    });
    $sel3.change(function(){
        if($(this).val()!=""){
            $obj.val($(this).val());
            $obj.next().val($(this).find("option:selected").text());
        }

    });
}
</script>